<template>
	<view class="page-bottom-fixed">
		<form @submit="form_submit" class="form-container">
			<view class="oh" style="padding: 20rpx;">
				<view class="form-gorup oh">
					<view class="form-gorup-item-left">
						<view class="form-gorup-title">联系人<text class="form-group-tips-must">*</text></view>
						<input type="text" name="name" :value="address_data.name || ''" maxlength="16"
							placeholder-class="cr-grey" class="cr-base" placeholder="联系人2~16个字符">
					</view>
					<view class="form-gorup-item-right">
						<view class="form-gorup-title">联系电话<text class="form-group-tips-must">*</text></view>
						<input type="text" name="tel" :value="address_data.tel || ''" maxlength="30"
							placeholder-class="cr-grey" class="cr-base" placeholder="座机或手机">
					</view>
				</view>

				<view class="form-gorup">
					<view class="br-b" style="padding-bottom: 5rpx; margin-bottom: 20rpx;">
						<view class="form-gorup-title">省市区<text class="form-group-tips-must">必选</text></view>
						<view class="select-address oh">
							<view class="section fl">
								<picker name="province" @change="select_province_event" :value="province_value"
									:range="province_list" range-key="name">
									<view :class="province_value == null ? 'cr-grey' : 'cr-base'">
										{{province_list[province_value] == null ? default_province : province_list[province_value]['name']}}
									</view>
								</picker>
							</view>
							<view class="section fl">
								<picker v-if="province_id != null" name="city" @change="select_city_event"
									:value="city_value" :range="city_list" range-key="name">
									<view :class="city_value == null ? 'cr-grey' : 'cr-base'">
										{{city_list[city_value] == null ? default_city : city_list[city_value]['name']}}
									</view>
								</picker>
								<text v-else class="cr-grey" @tap="region_select_error_event"
									data-value="请先选择省份">请先选择省份</text>
							</view>
							<view class="section fl">
								<picker v-if="city_id != null" name="county" @change="select_county_event"
									:value="county_value" :range="county_list" range-key="name">
									<view :class="county_value == null ? 'cr-grey' : 'cr-base'">
										{{county_list[county_value] == null ? default_county : county_list[county_value]['name']}}
									</view>
								</picker>
								<text v-else class="cr-grey" @tap="region_select_error_event"
									data-value="请先选择城市">请先选择城市</text>
							</view>
						</view>
					</view>

					<view class="pr">
						<view class="form-gorup-title">详细地址<text class="form-group-tips-must">*</text></view>
						<input type="text" name="address" :value="address_data.address || ''" maxlength="80"
							placeholder-class="cr-grey" class="cr-base bs-bb" placeholder="详细地址1~80个字符">
					</view>
				</view>

				<view class="bottom-fixed" style="padding: 20rpx;">
					<button class="bg-main br-main cr-white round text-size" type="default" form-type="submit"
						hover-class="none">保存</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import * as area from "../../utils/area.js";
	import {
		isValidPhone
	} from "../../utils/helper.js"
	export default {
		data() {
			return {
				default_province: "请选择省",
				default_city: "请选择市",
				default_county: "请选择区/县",
				province_list: [],
				province_value: null,
				province_id: null,
				city_list: [],
				city_id: null,
				city_value: null,
				county_list: [],
				county_id: null,
				county_value: null,
				address_data: {},
				home_user_address_map_status: 1
			}
		},

		onLoad(params) {
			let address_data = JSON.parse(params.address_data)
			this.address_data = address_data
			if (address_data?.province) {
				this.province_list = area.getList("province");
				this.province_id = address_data.province.code
				this.province_value = this.get_region_value(this.province_list, address_data.province.code)
			}
			if (this.address_data?.city) {
				this.city_list = area.getList("city", address_data.city.code.slice(0, 2));
				this.city_id = address_data.city.code
				this.city_value = this.get_region_value(this.city_list, address_data.city.code)
			}
			if (this.address_data?.county) {
				this.county_list = area.getList("county", address_data.county.code.slice(0, 2));
				this.county_id = address_data.county.code
				this.county_value = this.get_region_value(this.county_list, address_data.county.code)
			}
		},

		onReady() {
			this.province_list = area.getList("province")
		},

		methods: {
			// 地区初始化匹配索引
			get_region_value(list, code) {
				let value = null;
				list.forEach((d, i) => {
					if (d.code == code) {
						value = i;
						return false;
					}
				});
				return value;
			},

			select_province_event(e) {
				let index = e.detail.value || 0;
				if (index >= 0) {
					let data = this.province_list[index];
					this.province_value = index
					this.province_id = data.code
					this.city_value = null
					this.city_id = null
					this.get_city_list();
				}
			},

			select_city_event(e) {
				let index = e.detail.value || 0;
				if (index >= 0) {
					let data = this.city_list[index];
					this.city_value = index
					this.city_id = data.code
					this.county_value = null
					this.county_id = null
					this.get_county_list();
				}
			},

			select_county_event(e) {
				let index = e.detail.value || 0;
				if (index >= 0) {
					let data = this.county_list[index];
					this.county_value = index
					this.county_id = data.code
				}
			},

			get_city_list() {
				if (this.province_id) {
					this.city_list = area.getList("city", this.province_id.slice(0, 2))
				}
			},

			get_county_list() {
				if (this.city_id) {
					this.county_list = area.getList("county", this.city_id.slice(0, 4))
				}
			},

			// 省市区未按照顺序选择提示
			region_select_error_event(e) {
				let value = e.currentTarget.dataset.value || null;
				if (value != null) {
					uni.showToast({
						title: value,
						icon: "error",
					});
				}
			},

			form_submit(e) {
				let form_data = e.detail.value;
				console.log(form_data, 3333333333)
				if (!form_data.name) {
					uni.showToast({
						title: "请输入姓名",
						icon: "error",
					});
					return false;
				}
				if (!form_data.tel) {
					uni.showToast({
						title: "请输入电话",
						icon: "error",
					});
					return false;
				}
				if (!form_data.address) {
					uni.showToast({
						title: "请输入详细地址",
						icon: "error",
					});
					return false;
				}
				if (form_data.province == null) {
					uni.showToast({
						title: "请选择省份",
						icon: "error",
					});
					return false;
				}
				if (form_data.city == null) {
					uni.showToast({
						title: "请选择城市",
						icon: "error",
					});
					return false;
				}
				if (form_data.county == null) {
					uni.showToast({
						title: "请选择区县",
						icon: "error",
					});
					return false;
				}
				if (!isValidPhone(form_data.tel)) {
					uni.showToast({
						title: "手机号码不正确",
						icon: "error",
					});
					return false;
				}
				let address_data = {
					name: form_data.name,
					tel: form_data.tel,
					address: form_data.address,
					province: this.province_list[form_data.province],
					city: this.city_list[form_data.city],
					county: this.county_list[form_data.county]
				};
				this.$store.dispatch("dailyInfo/save_address", {
					address_data,
				});
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*
	* 三级联动
	*/
	.select-address {
		box-sizing: border-box;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 10rpx;
	}

	.select-address .section {
		width: 33.33%;
		box-sizing: border-box;
	}

	.select-address .section:not(:first-child) {
		padding: 0 5rpx;
	}
</style>
